<template>
  <el-dialog title='新增云柜员用户' :visible.sync='isShow' width='700px' :lock-scroll=false :close-on-click-modal=false @close='clearForm("queryForm")'>
    <div v-loading="loading">
      <div class="detailInfo">
        <el-card class='type-info-box-card'>
          <el-row>
            <el-col :lg='24'>
              <el-form ref='queryForm' size='mini' :model="queryForm" label-width="125px" :rules="rules" label-position="right">
                <el-row :gutter="50">
                  <el-col :span='12'>
                    <el-form-item label='云柜员所属中心' prop='BRANCHNO'>
                      <!-- <el-select v-model='queryForm.BRANCHNO'>
                        <el-option v-for='item in branchnoOpions' :key='item.CENTERID+item.BRANCHNO' :label='item.CENTERNAME' :value='item.CENTERID'>
                        </el-option>
                      </el-select> -->
                      <el-input v-model='queryForm.BRANCHNO' placeholder="请输入云柜员所属中心号码"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="50">
                  <el-col :span='12'>
                    <el-form-item label='柜员号' class='typeInfo-el-form-item' prop='TELLEID' maxlength="5">
                      <el-input v-model='queryForm.TELLEID' placeholder="请输入柜员号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label='柜员名称' class='typeInfo-el-form-item' prop='TELLERNAME'>
                      <el-input v-model='queryForm.TELLERNAME' placeholder="请输入柜员名称"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="50">
                  <el-col :span='12'>
                    <el-form-item label='性别' class='typeInfo-el-form-item' prop='AGENTSEX'>
                      <el-radio v-model='queryForm.AGENTSEX' label="0">男</el-radio>
                      <el-radio v-model='queryForm.AGENTSEX' label="1">女</el-radio>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label='角色' prop='AGENTROLE'>
                      <el-select v-model='queryForm.AGENTROLE'>
                        <el-option v-for='item in agentroleOpions' :key='item.value' :label='item.label' :value='item.value'>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="50">
                  <el-col :span='12'>
                    <el-form-item label='坐席级别' class='typeInfo-el-form-item' prop='AGENTLEVEL'>
                      <el-input v-model='queryForm.AGENTLEVEL' placeholder="请输入坐席级别"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label='柜员状态' prop='TELLERSTATUS'>
                      <el-select v-model='queryForm.TELLERSTATUS'>
                        <el-option v-for='item in telletstatusOpions' :key='item.value' :label='item.label' :value='item.value'>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="50">
                  <el-col :span='12'>
                    <el-form-item label='联系电话' class='typeInfo-el-form-item' prop='TELPHONE'>
                      <el-input v-model='queryForm.TELPHONE' placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label='邮箱' class='typeInfo-el-form-item' prop='EMAIL'>
                      <el-input v-model='queryForm.EMAIL' placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="50">
                  <el-col :span='24'>
                    <el-form-item label='服务水平' class='typeInfo-el-form-item' prop='SERVICELEVEL'>
                      <el-radio-group v-model='queryForm.SERVICELEVEL'>
                        <el-radio label="3">低级</el-radio>
                        <el-radio label="6">中级</el-radio>
                        <el-radio label="9">高级</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span='24'>
                    <el-form-item label='英语水平' prop='ENGLEVEL'>
                      <el-radio-group v-model='queryForm.ENGLEVEL'>
                        <el-radio label="3">低级</el-radio>
                        <el-radio label="6">中级</el-radio>
                        <el-radio label="9">高级</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="50">
                  <el-col :span='24'>
                    <el-form-item label='多媒体类型:' prop="MULTITYPE">
                      <el-checkbox-group v-model="queryForm.MULTITYPE">
                        <el-checkbox label="00">电话</el-checkbox>
                        <el-checkbox label="01">视频</el-checkbox>
                        <el-checkbox label="02">在线</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="50">
                  <el-col :span='24'>
                    <el-form-item label='语言类型:' prop="LANGUAGE">
                      <el-checkbox-group v-model="queryForm.LANGUAGE">
                        <el-checkbox label="0">全语种</el-checkbox>
                        <el-checkbox label="1">英语</el-checkbox>
                        <el-checkbox label="2">地方方言</el-checkbox>
                        <el-checkbox label="3">普通话</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="50">
                  <el-col :span='12'>
                    <el-form-item label='登陆方式' prop='LOGINFLG'>
                      <el-select v-model='queryForm.LOGINFLG'>
                        <el-option v-for='item in loginflgOpions' :key='item.value' :label='item.label' :value='item.value'>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label='订单分配方式' class='typeInfo-el-form-item' prop='GRABORDFLAG'>
                      <el-select v-model='queryForm.GRABORDFLAG'>
                        <el-option v-for='item in grabordflagOpions' :key='item.value' :label='item.label' :value='item.value'>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- <el-row :gutter="50">
                  <el-col :span='12'>
                    <el-form-item label="授权人用户名" prop='username'>
                      <el-input v-model="queryForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label="授权人密码" prop='password'>
                      <el-input v-model="queryForm.password" type="password" placeholder="请输入密码" :show-password="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row> -->
              </el-form>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div slot="footer" style="margin:10px 0;text-align:center">
        <el-button size="mini" @click="isShow=false">取消</el-button>
        <el-button type='primary' size='mini' @click="submit">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import DateUtils from '@/CTManage/utils/DateUtils';
  import request from "@/common/utils/requestCT";
  import cloudTellerAdd from "@/message/CTManage/teller/cloud-teller-add";
  import queryBranch from "@/message/CTManage/teller/cloud-teller-branch-query";
  import selectTree from "@/components/selectTree2/";
  import getGlobalParams from '@/common/utils/getGlobalParams';
  import spinnerList from "@/message/spinnerDataQuery/spinner-data-query";
  import cloudTellerQuery from "@/message/CTManage/teller/cloud-teller-query";
  // import authorazitionIns from "@/message/infoCollect/devMonitor/dev-authorazition";
  import Base64 from '@/CTManage/utils/base64';
  export default {
    components: {
      selectTree
    },
    data() {
      let virtualTellerCheck = (rule, value, callback) => { //自定义表单验证 
        if (value != "") {
          let resBody = new cloudTellerQuery();
          resBody.data.tellerId = this.queryForm.TELLEID
          request(resBody)
            .then(response => {
              if (response.SYS_HEAD.ReturnCode == "000000") {
                this.tableData = response.RSP_BODY.resultSet;
                if (this.tableData.length > 0) {
                  //  callback("");
                  this.$message({
                    type: "error",
                    message: "柜员号已存在"
                  });
                } else {
                  callback();
                }
              } else {
                callback("柜员验证出错");
              }
            })
            .catch(error => {
              console.log(error);
            });
        }
      };
      return {
        branchnoOpions: [],
        loading: false,
        brno: [],
        queryForm: { //表单数据
          BRANCHNO: '',
          TELLEID: '',
          TELLERNAME: '',
          LANGUAGE: [],
          TELLERSTATUS: '',
          LOGINFLG: '',
          AGENTSEX: '',
          AGENTROLE: '',
          AGENTLEVEL: '',
          TELPHONE: '',
          SERVICELEVEL: '',
          ENGLEVEL: '',
          MULTITYPE: [],
          GRABORDFLAG: '',
          username: '',
          password: ''
        },
        grabordflagOpions: [{
            label: '自动派单',
            value: '0'
          },
          {
            label: '柜员抢单',
            value: '1'
          }
        ],
        agentroleOpions: [{
            label: '普通坐席',
            value: '01'
          },
          {
            label: '组长',
            value: '02'
          },
          {
            label: '班长',
            value: '03'
          },
          {
            label: '坐席主管',
            value: '04'
          },
          {
            label: '坐席经理',
            value: '05'
          },
          {
            label: '质检员',
            value: '06'
          },
          {
            label: '质检主管',
            value: '07'
          },
          {
            label: '培训师',
            value: '08'
          },
          {
            label: '培训主管',
            value: '09'
          },
          {
            label: '排班师',
            value: '10'
          },
          {
            label: '排班主管',
            value: '11'
          },
          {
            label: '知识库普通用户',
            value: '12'
          },
          {
            label: '知识库管理员',
            value: '13'
          }
        ],
        telletstatusOpions: [{
            label: '试用',
            value: '01'
          },
          {
            label: '正式上岗',
            value: '02'
          }
        ],
        loginflgOpions: [{
            label: '指纹',
            value: '0'
          },
          {
            label: '密码',
            value: '1'
          }
        ],
        rules: { //表单校验规则
          BRANCHNO: [{
            required: true,
            message: "请输入机构号",
            trigger: "change"
          }],
          TELLEID: [{
              required: true,
              message: "请输入柜员号",
              trigger: "blur"
            },
            {
              require: false,
              validator: virtualTellerCheck,
              trigger: "blur"
            }
          ],
          TELLERNAME: [{
            required: true,
            message: "请输入柜员名称",
            trigger: "blur"
          }],
          LANGUAGE: [{
            required: true,
            message: "请选择语言",
            trigger: "blur"
          }],
          MULTITYPE: [{
            required: true,
            message: "请选择多媒体类型",
            trigger: "blur"
          }],
          TELLERSTATUS: [{
            required: true,
            message: "请选择柜员状态",
            trigger: "blur"
          }],
          username: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }],

           AGENTSEX: [{
            required: true,
            message: "请选择性别",
            trigger: "blur"
          }],
          AGENTROLE: [{
            required: true,
            message: "请选择角色",
            trigger: "blur"
          }],
          AGENTLEVEL: [{
            required: true,
            message: "请输入级别",
            trigger: "blur"
          }],
          LOGINFLG: [{
            required: true,
            message: "请选择登陆方式",
            trigger: "blur"
          }],
          GRABORDFLAG: [{
            required: true,
            message: "请选择订单分配方式",
            trigger: "blur"
          }]
        }
      };
    },
    props: {
      option: Object
    },
    methods: {
      async branchInit() {
        let resBodyTellerSkills = new queryBranch();
        let responseTellerSkills = await request(resBodyTellerSkills);
        if (responseTellerSkills.SYS_HEAD.ReturnCode == "000000") {
          this.branchnoOpions = responseTellerSkills.RSP_BODY.resultSet;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + responseTellerSkills.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
        }
      },
      submit() {
        //添加策略事件
        this.$refs["queryForm"].validate(valid => {
          if (valid) {
            // if (this.$store.state.user.userId == this.queryForm.username.trim()) {
            //   this.$message({
            //     type: "warning",
            //     message: "授权用户须为同一机构的不同用户!"
            //   });
            //   return;
            // };
            // this.loading = true;
            // let resBody = new authorazitionIns(); //aums.v170_userauthcheck
            // resBody.data.checkUserID = sessionStorage.userId;
            // resBody.data.authUserName = this.queryForm.username.trim();
            // var a = new Base64();
            // resBody.data.userPwd = a.encode(this.queryForm.password);
            // request(resBody)
            //   .then(response => {
            //     if (response.SYS_HEAD.ReturnCode == "000000") {
                  let that = this;
                  let resBody = new cloudTellerAdd();
                  resBody.data.BRANCHNO = that.queryForm.BRANCHNO;
                  resBody.data.TELLEID = that.queryForm.TELLEID;
                  resBody.data.TELLERNAME = that.queryForm.TELLERNAME;
                  resBody.data.LANGUAGE = that.queryForm.LANGUAGE.join("|")
                  resBody.data.TELLERSTATUS = that.queryForm.TELLERSTATUS;
                  resBody.data.LOGINFLG = that.queryForm.LOGINFLG
                  resBody.data.CRTDATE = DateUtils.getDate().substring(0, 4) + "-" + DateUtils.getDate().substring(4, 6) + "-" + DateUtils.getDate().substring(6, 8);
                  resBody.data.CRTTIME = DateUtils.getTime().substring(0, 2) + ":" + DateUtils.getTime().substring(2, 4) + ":" + DateUtils.getTime().substring(4, 6);
                  resBody.data.CRTTELLER = this.$store.state.user.userId;
                  resBody.data.CRTBRNO = this.$store.state.user.branchId;
                  resBody.data.AGENTSEX = that.queryForm.AGENTSEX;
                  resBody.data.AGENTROLE = that.queryForm.AGENTROLE
                  resBody.data.AGENTLEVEL = that.queryForm.AGENTLEVEL;
                  resBody.data.TELPHONE = that.queryForm.TELPHONE
                  resBody.data.EMAIL = that.queryForm.EMAIL;
                  resBody.data.SERVICELEVEL = that.queryForm.SERVICELEVEL
                  resBody.data.ENGLEVEL = that.queryForm.ENGLEVEL;
                  resBody.data.MULTITYPE = that.queryForm.MULTITYPE.join("|")
                  resBody.data.GRABORDFLAG = that.queryForm.GRABORDFLAG;
                  request(resBody)
                    .then(response => {
                      if (response.SYS_HEAD.ReturnCode === "000000") {
                        this.loading = false;
                        this.$message({
                          type: "success",
                          message: "云柜员用户新增成功!"
                        });
                        this.isShow = false;
                        this.$emit("refreshTable");
                      } else if (response.SYS_HEAD.ReturnCode === "ERR_REMO") {
                        this.loading = false;
                        this.$message({
                          type: "error",
                          message: "柜员号已存在"
                        });
                        this.loading = false;
                      } else {
                        this.$message({
                          type: "error",
                          message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                        });
                        this.loading = false;
                      }
                    })
                    .catch(error => {
                      this.loading = false;
                      console.log(error);
                    });
              //   } else {
              //     this.loading = false;
              //     //通讯失败
              //     this.$message({
              //       type: "warning",
              //       message: response.SYS_HEAD.ReturnMessage
              //     });
              //   }
              // })
          }
        });
      },
      clearForm(item) {
        if (this.$refs.queryForm) {
          this.$refs.queryForm.resetFields();
          this.$refs.queryForm.clearValidate();
        }
      }
    },
    computed: {
      isShow: {
        get: function() {
          return this.option.isShow;
        },
        set: function(newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    async created() {
      this.branchInit();
      // let resBody = new spinnerList();
      // resBody.data.spinnerList = [{
      //   spinnerName: "branch"
      // }];
      // let response = await request(resBody);
      // if (response.SYS_HEAD.ReturnCode == "000000") {
      //   this.brno = response.RSP_BODY.branchSpinner;
      // } else {
      //   this.$message({
      //     type: "error",
      //     message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
      //   });
      // }
    }
    // mounted() {
    //   window.addEventListener("scroll", this.handleScroll);
    // }
  };
</script>

<style lang="scss" scope>
  .isShow {
    display: none;
  }
  .returnBtn {
    width: 50px;
    height: 50px;
    background: #000;
    opacity: 0.5;
    position: fixed;
    right: 45px;
    bottom: 53px;
    border-radius: 3px;
    text-align: center;
    padding-top: 15px;
  }
  .returnBtn:hover {
    opacity: 0.9;
  }
  .modelMargin {
    margin: 5px;
    .el-card__header {
      height: 65px;
    }
  }
  #returnBtnTop {
    height: 50px;
    background: #409eff;
    width: 100%;
    transition: all 0.3s;
  }
  .editClass {
    input.el-input__inner {
      border: none;
      background: rgba(0, 0, 0, 0) !important;
    }
  }
  .inputWidth100 {
    width: 100%;
  }
</style>
